<template>
	<view class="big-box">
		<view class="box">
			<view class="content">
				<text class="title">{{ detail.leaveWordContent }}</text>
				<text class="time">{{ detail.createdTime }}</text>

				<view class="feedback-img"><image @click="showPic(index)" v-for="(item, index) in detail.imgUrls" :key="index" class="img-icon" :src="item"></image></view>
				<view v-if="detail.systemReply" class="detail">
					<view class="detail-item">
						<text class="name">系统回复：</text>
						<text class="desc">{{ detail.systemReply || '' }}ces </text>
					</view>
					<view class="detail-item">
						<text class="name">时间：</text>
						<text class="desc">{{ detail.systemReplyTime || '' }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { leaveworddetail } from '@/service/mine.js';
export default {
	data() {
		return { detail: {} };
	},
	async onLoad({ id }) {
		const resp = await leaveworddetail({ id }, { loading: true });
		this.detail = resp;
	},
	methods: {
		showPic(index) {
			uni.previewImage({
				urls: this.detail.imgUrls,
				current: index
			});
		}
	}
};
</script>

<style scoped lang="scss">
view {
	display: flex;
}

.big-box {
	flex-direction: column;
	width: 750upx;
	height: 100vh;
	.box {
		width: 750upx;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		height: 100%;
		.content {
			flex-direction: column;
			width: 690upx;
			align-items: center;
			.title {
				margin-top: 40upx;
				color: #323437;
				font-size: 40upx;
				font-weight: 500;
			}
			.time {
				margin: 20upx 0 30upx 0;
				color: #a9b5c2;
				font-size: 26upx;
			}
			.notice-content-box {
				width: 100%;

				.notice-content {
					text-align: left;
					color: #323437;
					font-size: 30upx;
					line-height: 60upx;
				}
			}
			.list-box {
				margin-top: 40upx;
				width: 690upx;
				flex-direction: column;
				align-items: center;
				.item {
					margin-bottom: 50upx;
					width: 690upx;
					justify-content: space-between;
					align-items: center;
					text {
						color: #323437;
						font-size: 30upx;
					}
					.state {
						color: #a9b5c2;
					}
				}
			}
		}
		.go-look {
			width: 750upx;
			height: 110upx;
			background-color: #3291f9;
			justify-content: center;
			align-items: center;
			text {
				color: #ffffff;
				font-size: 36upx;
			}
		}
	}
}
.detail {
	margin-top: 30upx;
	width: 690upx;
	margin-left: 30upx;
	flex-direction: column;
	align-items: center;
}
.detail-item {
	width: 100%;
}
.detail-item text {
	font-size: 28upx;
	line-height: 44upx;
}
.detail-item .name {
	color: #323437;
}
.detail-item .desc {
	color: #a9b5c2;
}
.feedback-img {
	display: flex;
	padding-top: 30upx;
	border-top: 1upx solid #f5f5f5;
	flex-wrap: wrap;
	padding-left: 30rpx;
	width: 750upx;
}
.img-item {
	display: flex;
	position: relative;
	padding: 0upx 10upx 0 0;
	margin-right: 11upx;
	margin-bottom: 30upx;
	width: 168upx;
}
.img-item .img {
	width: 157upx;
	height: 157upx;
}

.img-icon {
	width: 158upx;
	height: 158upx;
	margin-right: 11upx;
	box-sizing: content-box;
	margin-bottom: 30upx;
}
.feedback-imgtips {
	width: 690upx;
	margin-top: 5upx;
	margin-bottom: 59upx;
}
.feedback-imgtips text {
	width: 100%;
	font-size: 26upx;
	color: #a9b6c7;
	line-height: 50upx;
	margin-top: 5upx;
}
</style>
